<template>
	<view class="detail-salary-page">
		<!-- 自定義導航欄 -->
		<u-navbar
			title="薪资详情"
			:border="false"
			:auto-back="true"
			:bg-color="'#FFFFFF'"
			:title-color="'#333333'"
			:title-size="36"
			:title-weight="'bold'"
			placeholder
		>
			<template #right>
				<u-icon name="more-dot-fill" size="20" color="#333" @click="showMoreOptions"></u-icon>
			</template>
		</u-navbar>

		<!-- 详情内容 -->
		<view class="detail-content">
			
			<!-- 员工信息 -->
			<view class="detail-section">
				<view class="section-header">
					<text class="section-title">员工信息</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">姓名</text>
						<text class="info-value">{{ salaryDetail.employeeName }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">身份证</text>
						<text class="info-value">{{ salaryDetail.idCard }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">入职日期</text>
						<text class="info-value">{{ salaryDetail.entryDate }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">结算日期</text>
						<text class="info-value">{{ salaryDetail.settlementDate }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">离职类别</text>
						<text class="info-value">{{ salaryDetail.resignationType }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">工种</text>
						<text class="info-value">{{ salaryDetail.jobType }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">电话号码</text>
						<text class="info-value">{{ salaryDetail.phoneNumber }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">在职天数</text>
						<text class="info-value">{{ salaryDetail.daysOnDuty }}天</text>
					</view>
				</view>
			</view>

			<!-- 薪资明细 -->
			<view class="detail-section" v-if="salaryDetail.add && salaryDetail.add.length > 0">
				<view class="section-header">
					<text class="section-title">薪资明细</text>
				</view>
				<view class="info-grid">
					<view class="info-item" v-for="(item, index) in salaryDetail.add" :key="index">
						<text class="info-label">{{ item.name || '明细项目' }}</text>
						<text class="info-value">¥{{ item.mount || 0 }}</text>
					</view>
				</view>
			</view>

			<!-- 扣款明细 -->
			<view class="detail-section" v-if="salaryDetail.reduce && salaryDetail.reduce.length > 0">
				<view class="section-header">
					<text class="section-title">扣款明细</text>
				</view>
				<view class="info-grid">
					<view class="info-item" v-for="(item, index) in salaryDetail.reduce" :key="index">
						<text class="info-label">{{ item.name || '扣款项目' }}</text>
						<text class="info-value">-¥{{ item.mount || 0 }}</text>
					</view>
				</view>
			</view>

			<!-- 工价信息 -->
			<view class="detail-section">
				<view class="section-header">
					<text class="section-title">工价</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">工价</text>
						<text class="info-value">¥{{ salaryDetail.workPrice }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">核算工价</text>
						<text class="info-value">¥{{ salaryDetail.calculatedWorkPrice }}</text>
					</view>
				</view>
			</view>

			<!-- 薪资计算 -->
			<view class="detail-section">
				<view class="section-header">
					<text class="section-title">薪资计算</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">补贴</text>
						<text class="info-value">¥{{ salaryDetail.subsidy }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">应发薪资</text>
						<text class="info-value gross-salary">¥{{ salaryDetail.grossSalary }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">个税</text>
						<text class="info-value">¥{{ salaryDetail.individualTax }}</text>
					</view>
				</view>
			</view>

			<!-- 借支信息 -->
			<view class="detail-section">
				<view class="section-header">
					<text class="section-title">借支</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">当月</text>
						<text class="info-value">¥{{ salaryDetail.advanceCurrentMonth }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">次月</text>
						<text class="info-value">¥{{ salaryDetail.advanceNextMonth }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">总计</text>
						<text class="info-value">¥{{ salaryDetail.advanceTotal }}</text>
					</view>
				</view>
			</view>

			<!-- 住宿信息 -->
			<view class="detail-section">
				<view class="section-header">
					<text class="section-title">住宿</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">是否住宿</text>
						<text class="info-value">{{ salaryDetail.isAccommodation }}</text>
					</view>
				</view>
			</view>

			<!-- 扣款信息 -->
			<view class="detail-section">
				<view class="section-header">
					<text class="section-title">扣款</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">住宿/水电</text>
						<text class="info-value">¥{{ salaryDetail.accommodationDeduction }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">扣上月负数</text>
						<text class="info-value">¥{{ salaryDetail.lastMonthNegativeDeduction }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">保险</text>
						<text class="info-value">¥{{ salaryDetail.insuranceDeduction }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">其它扣款</text>
						<text class="info-value">¥{{ salaryDetail.otherDeductions }}</text>
					</view>
				</view>
			</view>

			<!-- 最终薪资 -->
			<view class="detail-section">
				<view class="section-header">
					<text class="section-title">最终薪资</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">扣款合计</text>
						<text class="info-value">¥{{ salaryDetail.totalDeductions }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">实发薪资</text>
						<text class="info-value net-salary">¥{{ salaryDetail.netSalary }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">离职已发</text>
						<text class="info-value">¥{{ salaryDetail.resignationIssued }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">补发差额</text>
						<text class="info-value">¥{{ salaryDetail.retroactivePayment }}</text>
					</view>
				</view>
			</view>

			<!-- 银行信息 -->
			<view class="detail-section">
				<view class="section-header">
					<text class="section-title">银行信息</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">开户行</text>
						<text class="info-value">{{ salaryDetail.bankName }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">银行卡</text>
						<text class="info-value">{{ salaryDetail.bankCard }}</text>
					</view>
				</view>
			</view>

			<!-- 其他信息 -->
			<view class="detail-section">
				<view class="section-header">
					<text class="section-title">其他信息</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="info-label">备注</text>
						<text class="info-value">{{ salaryDetail.remarks || '无' }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">转款日期</text>
						<text class="info-value">{{ salaryDetail.transferDate }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">出账企业</text>
						<text class="info-value">{{ salaryDetail.billingCompany }}</text>
					</view>
				</view>
			</view>

			<!-- 确认薪资按钮 -->
			<view class="confirm-section" v-if="!salaryDetail.isConfirmed && salaryDetail.billStatus !== 5">
				<button class="confirm-btn" @click="confirmSalary">
					<u-icon name="checkmark" size="20" color="#FFFFFF"></u-icon>
					<text class="confirm-text">确认薪资</text>
				</button>
			</view>

			<!-- 已确认状态 -->
			<view class="confirmed-section" v-if="salaryDetail.isConfirmed || salaryDetail.billStatus === 5">
				<view class="confirmed-status">
					<u-icon name="checkmark-circle" size="24" color="#31a880"></u-icon>
					<text class="confirmed-text">薪资已确认</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { userStore } from '@/stores/userStore'
import { salaryApi } from '@/api/api-helper.js'

// 响应式数据
const loading = ref(false)
const salaryDetail = ref<any>({})

// 获取薪资详情
const getSalaryDetail = async (id: string) => {
	loading.value = true
	try {
		const openId = userStore.getOpenId()
		if (!openId) {
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			})
			return
		}

		// 调用真实的API接口
		const response = await salaryApi.getSalaryDetail(id)
		
		console.log('薪资明细API响应:', response)
		
		if (response && response.code === 200) {
			const data = response.data
			
			// 根据接口文档映射数据字段
			const detail = {
				id: data.id || id,
				employeeName: data.personName || '未知',
				idCard: data.idCard || '未知',
				entryDate: data.hireDate || '未知',
				settlementDate: data.attendanceDate || '未知',
				resignationType: data.personStatus || '未知',
				jobType: data.positionName || '未知',
				phoneNumber: data.phone || '未知',
				daysOnDuty: 0, // 接口中没有这个字段
				workHours: 0, // 接口中没有这个字段
				overtimeHours: 0, // 接口中没有这个字段
				totalWorkHours: 0, // 接口中没有这个字段
				workPrice: data.newWages || 0,
				calculatedWorkPrice: data.newWages || 0,
				subsidy: 0, // 从add列表中计算
				grossSalary: 0, // 从add列表中计算
				individualTax: 0, // 接口中没有这个字段
				advanceCurrentMonth: 0, // 接口中没有这个字段
				advanceNextMonth: 0, // 接口中没有这个字段
				advanceTotal: 0, // 接口中没有这个字段
				isAccommodation: '未知', // 接口中没有这个字段
				accommodationDeduction: 0, // 从reduce列表中计算
				lastMonthNegativeDeduction: 0, // 接口中没有这个字段
				insuranceDeduction: 0, // 从reduce列表中计算
				otherDeductions: 0, // 从reduce列表中计算
				totalDeductions: 0, // 从reduce列表中计算
				netSalary: 0, // 计算得出
				resignationIssued: 0, // 接口中没有这个字段
				retroactivePayment: 0, // 接口中没有这个字段
				bankName: '未知', // 接口中没有这个字段
				bankCard: '未知', // 接口中没有这个字段
				remarks: '', // 接口中没有这个字段
				transferDate: data.attendanceDate || '未知',
				billingCompany: '未知', // 接口中没有这个字段
				isConfirmed: false, // 接口中没有这个字段
				// 新增接口返回的原始数据
				add: data.add || [], // 薪资明细列表
				reduce: data.reduce || [] // 扣款明细列表
			}
			
			// 计算薪资总额（从add列表中）
			if (detail.add && Array.isArray(detail.add)) {
				detail.grossSalary = detail.add.reduce((sum, item) => {
					return sum + (parseFloat(item.mount) || 0)
				}, 0)
			}
			
			// 计算扣款总额（从reduce列表中）
			if (detail.reduce && Array.isArray(detail.reduce)) {
				detail.totalDeductions = detail.reduce.reduce((sum, item) => {
					return sum + (parseFloat(item.mount) || 0)
				}, 0)
			}
			
			// 计算实发薪资
			detail.netSalary = detail.grossSalary - detail.totalDeductions
			
			salaryDetail.value = detail
			
			console.log('处理后的薪资详情数据:', salaryDetail.value)
		} else {
			uni.showToast({
				title: response?.msg || '获取薪资详情失败',
				icon: 'none'
			})
		}
		
	} catch (error) {
		console.error('获取薪资详情失败:', error)
		uni.showToast({
			title: '网络错误',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 方法
const showMoreOptions = () => {
	uni.showActionSheet({
		itemList: ['分享', '打印', '导出'],
		success: (res) => {
			console.log('选择了:', res.tapIndex)
			uni.showToast({
				title: '功能开发中',
				icon: 'none'
			})
		}
	})
}

const confirmSalary = async () => {
	try {
		uni.showLoading({
			title: '确认中...',
			mask: true
		})
		
		// 调用确认薪资API
		const response = await salaryApi.confirmMyWages({
			ids: [salaryDetail.value.id]
		})
		
		uni.hideLoading()
		
		if (response && response.code === 200) {
			// 更新本地状态
			salaryDetail.value.isConfirmed = true
			
			uni.showToast({
				title: '薪资确认成功',
				icon: 'success'
			})
		} else {
			uni.showToast({
				title: response?.msg || '确认失败',
				icon: 'none'
			})
		}
		
	} catch (error) {
		uni.hideLoading()
		console.error('确认薪资失败:', error)
		uni.showToast({
			title: '确认失败',
			icon: 'none'
		})
	}
}

// 生命周期
onMounted(() => {
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	const id = currentPage.options?.id || '1'
	getSalaryDetail(id)
})

onShow(() => {
	// 页面显示时的逻辑
})
</script>

<style lang="scss" scoped>
.detail-salary-page {
	min-height: 100vh;
	background-color: #F5F5F5;
}

.detail-content {
	padding: 20rpx;
}

.detail-section {
	background-color: #FFFFFF;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.section-header {
	padding: 20rpx 30rpx;
	background-color: #f8f9fa;
	border-bottom: 1rpx solid #e9ecef;
}

.section-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
}

.info-grid {
	padding: 20rpx 30rpx;
}

.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
	
	&:last-child {
		border-bottom: none;
	}
}

.info-label {
	font-size: 26rpx;
	color: #666666;
	min-width: 160rpx;
}

.info-value {
	font-size: 26rpx;
	color: #333333;
	flex: 1;
	text-align: right;
	
	&.gross-salary {
		font-weight: bold;
		color: #FF6B35;
	}
	
	&.net-salary {
		font-weight: bold;
		color: #31a880;
		font-size: 28rpx;
	}
}

/* 确认薪资按钮 */
.confirm-section {
	padding: 30rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.confirm-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 25rpx 0;
	background-color: #31a880;
	color: #FFFFFF;
	border: none;
	border-radius: 12rpx;
	font-size: 28rpx;
	font-weight: 500;
	gap: 10rpx;
	cursor: pointer;
	transition: all 0.2s ease;
	
	&:active {
		background-color: #27866a;
	}
}

.confirm-text {
	font-size: 28rpx;
	color: #FFFFFF;
}

/* 已确认状态 */
.confirmed-section {
	padding: 30rpx;
	background-color: #FFFFFF;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.confirmed-status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10rpx;
}

.confirmed-text {
	font-size: 28rpx;
	color: #31a880;
	font-weight: 500;
}
</style>
